<template>
  <div class="adminHandle" >
    <div style="margin-top:30px">
      <h2>考试信息管理</h2>
      <el-table
        :data="tableDataExam"
        style="width: 100%">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="考试id">
                <span>{{ props.row.id }}</span>
              </el-form-item>
              <el-form-item label="考试人数">
                <span v-show="!isEdit">{{ props.row.sid }}</span>
                <el-input v-model="props.row.sid" v-show="isEdit"></el-input>
              </el-form-item>
              <el-form-item label="考试科目">
                <span v-show="!isEdit">{{ props.row.courseName }}</span>
                <el-input v-model="props.row.courseName" v-show="isEdit"></el-input>
              </el-form-item>
              <el-form-item label="监考老师">
                <span v-show="!isEdit">{{ props.row.teacherName }}</span>
                <el-input v-model="props.row.teacherName" v-show="isEdit"></el-input>
              </el-form-item>
              <el-form-item label="考场">
                <span v-show="!isEdit">{{ props.row.clazzRoom }}</span>
                <el-input v-model="props.row.clazzRoom" v-show="isEdit"></el-input>
              </el-form-item>
              <el-form-item label="考试开始时间">
                <span v-show="!isEdit">{{ props.row.startTime }}</span>
                <el-input suffix-icon="el-icon-date" placeholder="YYYY-MM-DD HH:mm" v-model="props.row.startTime" v-show="isEdit"></el-input>
              </el-form-item>
              <el-form-item label="考试结束时间">
                <span v-show="!isEdit">{{ props.row.endTime }}</span>
                <el-input suffix-icon="el-icon-date" placeholder="YYYY-MM-DD HH:mm" v-model="props.row.endTime" v-show="isEdit"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="warning" @click="toEdit">编辑</el-button>
                <el-button type="primary" v-show="isEdit" @click="quitEdit">确定</el-button>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column
          label="考试id"
          prop="id">
        </el-table-column>
        <el-table-column
          label="考试人数"
          prop="sid">
        </el-table-column>
        <el-table-column
          label="考试科目"
          prop="courseName">
        </el-table-column>
        <el-table-column
          label="考试开始时间"
          prop="startTime">
        </el-table-column>
        <el-table-column
          label="考试结束时间"
          prop="endTime">
        </el-table-column>
      </el-table>

      <el-button type="primary" @click="addExams" class="addButton">增加考试信息</el-button>

      <div class="formBox">
        <el-form ref="form" :model="addExam" label-width="120px">
          <div style="display: flex;justify-content: center;margin-bottom: 6px">
            <div style="margin-left: 12px;margin-right:12px;line-height:40px;color: #606266;font-size:14px">考试科目</div>
            <el-autocomplete
              v-model="courseName"
              :fetch-suggestions="querySearchAsync1"
              placeholder="请选择考试科目"
              @select="handleSelect1"
            ></el-autocomplete>
          </div>

          <div style="display: flex;justify-content: center;margin-bottom: 6px">
            <div style="margin-left: 12px;margin-right:12px;line-height:40px;color: #606266;font-size:14px">监考老师</div>
            <el-autocomplete
              v-model="teacherName"
              :fetch-suggestions="querySearchAsync2"
              placeholder="请选择监考老师"
              @select="handleSelect2"
            ></el-autocomplete>
          </div>

          <div style="display: flex;justify-content: center;margin-bottom: 6px">
            <div style="margin-left: 40px;margin-right:12px;line-height:40px;color: #606266;font-size:14px">考场</div>
            <el-autocomplete
              v-model="clazzRoom"
              :fetch-suggestions="querySearchAsync3"
              placeholder="请选择考场"
              @select="handleSelect3"
            ></el-autocomplete>
          </div>

          <div style="display: flex;justify-content: center;margin-bottom:6px">
            <span style="margin-left:16px;margin-right:10px;line-height:40px;color: #606266;font-size:14px">
              考试人数
            </span>
            <el-input v-model="addExam.totalStudent" style="width:200px"></el-input>
          </div>

          <div class="block" style="display:flex;justify-content: center;margin-bottom: 6px">
            <span class="demonstration"
                  style="width:90px;margin-left:256px;margin-right: 10px;line-height:40px;color: #606266;font-size:14px">考试开始时间
            </span>
            <el-date-picker
              value-format="yyyy-MM-dd HH:mm:ss"
              style="margin-right:255px"
              v-model="addExam.startTime"
              type="datetime"
              placeholder="选择日期时间">
            </el-date-picker>
          </div>


          <div class="block" style="display:flex;justify-content: center;margin-bottom: 6px">
            <span class="demonstration"
                  style="width:90px;margin-left:256px;margin-right: 10px;line-height:40px;color: #606266;font-size:14px">考试结束时间
            </span>
            <el-date-picker
              value-format="yyyy-MM-dd HH:mm:ss"
              style="margin-right:255px"
              v-model="addExam.endTime"
              type="datetime"
              placeholder="选择日期时间">
            </el-date-picker>
          </div>

        </el-form>
      </div>
    </div>

  </div>
</template>

<script>
  import axios from 'axios'

export default {
  name: "HostExamInit",
  data(){
    return{
      isEdit:false,
      courseNames:[],
      courseName:'',
      teacherNames:[],
      teacherName:'',
      clazzRooms: [],
      clazzRoom:'',

      addExam:{
        // id:'',
        totalStudent:'',
        courseName:'',
        teacherName:'',
        clazzRoom:'',
        startTime:'',
        endTime:'',
      },
      tableDataExam:[]
    }
  },
  methods:{
    Time(value){
      var d = new Date(value);
      var date = d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate() + ' ' + d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds();
      console.log(date)
      return date;
    },
    toEdit(){
      this.isEdit = true
    },
    quitEdit(){
      this.isEdit = false
    },
    addExams(){
      // this.addExam.id = this.tableDataExam.length + 1

      this.addExam.courseName = this.courseName
      this.addExam.teacherName = this.teacherName
      this.addExam.clazzRoom = this.clazzRoom


      axios.defaults.headers.common["token"] = this.token;
      axios.post((this.ip + '/exam/admin'),this.addExam,{headers: {'Content-Type':'application/json'}}).then((response)=>{
        console.log(response)
        console.log(response.data)

      }).catch(function (error) {
        console.log(error);
      });

      this.tableDataExam = undefined
      this.tableDataExam = new Array()
      axios.get((this.ip + '/exam/admin')).then((response)=>{
        console.log(response)
        console.log(response.data)
        for(let i=0;i<response.data.length;i++){
          this.tableDataExam.push({
            id:response.data[i].id,
            sid:response.data[i].totalStudent,
            startTime:response.data[i].startTime,
            endTime:response.data[i].endTime,
            courseName:response.data[i].courseName,
            teacherName:response.data[i].teacherName,
            clazzRoom:response.data[i].clazzRoom

          })
        }
      }).catch(function (error) {
        console.log(error);
      });
    },



    querySearchAsync1(queryString, cb) {
      var courseNames = this.courseNames;
      var results = queryString ? courseNames.filter(this.createStateFilter1(queryString)) : courseNames;

      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        cb(results);
      }, 3000 * Math.random());
    },
    createStateFilter1(queryString) {
      return (state) => {
        return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    handleSelect1(item) {
      console.log(item);
    },



    querySearchAsync2(queryString, cb) {
      var teacherNames = this.teacherNames;
      var results = queryString ? teacherNames.filter(this.createStateFilter2(queryString)) : teacherNames;

      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        cb(results);
      }, 3000 * Math.random());
    },
    createStateFilter2(queryString) {
      return (teacherName) => {
        return (teacherName.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    handleSelect2(item) {
      console.log(item);
    },



    querySearchAsync3(queryString, cb) {
      var clazzRooms = this.clazzRooms;
      var results = queryString ? clazzRooms.filter(this.createStateFilter3(queryString)) : clazzRooms;

      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        cb(results);
      }, 3000 * Math.random());
    },
    createStateFilter3(queryString) {
      return (clazzRoom) => {
        return (clazzRoom.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    handleSelect3(item) {
      console.log(item);
    }
  },
  watch:{

  },
  mounted(){
    this.ip = localStorage.getItem('ip');
    this.token = sessionStorage.getItem('token');

    axios.defaults.headers.common["token"] = this.token;
    axios.get((this.ip + '/exam/admin')).then((response)=>{
      console.log(response)
      console.log(response.data)
      for(let i=0;i<response.data.length;i++){
        this.tableDataExam.push({
          id:response.data[i].id,
          sid:response.data[i].totalStudent,
          startTime:response.data[i].startTime,
          endTime:response.data[i].endTime,
          courseName:response.data[i].courseName,
          teacherName:response.data[i].teacherName,
          clazzRoom:response.data[i].clazzRoom

        })
      }
    }).catch(function (error) {
      console.log(error);
    });

    axios.defaults.headers.common["token"] = this.token;
    axios.get((this.ip + '/course/')).then((response)=>{
      console.log(response)
      console.log(response.data)

      for(let i=0;i<response.data.length;i++){
        this.courseNames.push({
          "value":response.data[i].name
        })
      }
    }).catch(function (error) {
      console.log(error);
    });

    axios.defaults.headers.common["token"] = this.token;
    axios.get((this.ip + '/clazzRoom/all')).then((response)=>{
      console.log(response)
      console.log(response.data)
      for(let i=0;i<response.data.length;i++){
        this.clazzRooms.push({
          "value":response.data[i].addr
        })
      }

    }).catch((error)=>{
      console.log(error)
    })

    axios.defaults.headers.common["token"] = this.token;
    axios.get((this.ip + '/TEACHER/')).then((response)=>{
      console.log(response)
      console.log(response.data)
      for(let i=0;i<response.data.length;i++){
        this.teacherNames.push({
          "value":response.data[i].name
        })
      }

    }).catch((error)=>{
      console.log(error)
    })
  }

}
</script>

<style scoped>
.adminHandle{
  width: 100%;
  padding: 5px 10px 0px 10px;
  margin: 20px 100px 0px 100px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3);
}
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
.addButton{
  margin: 20px 0px;
}
.formBox{
  margin: 0px 200px;
}
.el-button--warning:focus, .el-button--warning:hover {
  background: #00d4d9;
  border-color: #00d4d9;
  color: #FFF;
}
.el-button--warning {
  color: #FFF;
  background-color: #00a4a8;
  border-color: #00a4a8;
}
.el-form-item {
  margin: 5px 0px;
}
</style>
